<template>
  <div class="Tables">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column prop="title"   label="排序" width="99" align="center">
        <template slot-scope="scope">
          <el-button
              size="mini"
              class="sortbtn"
              :disabled="scope.$index===0"
              @click="moveUp(scope.$index,scope.row)"><i class="el-icon-arrow-up"></i></el-button>
            <el-button
              size="mini"
              class="sortbtn"
              :disabled="scope.$index===(tableData.length-1)"
              @click="moveDown(scope.$index,scope.row)"><i class="el-icon-arrow-down"></i></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="title"   label=" 班型名称 " show-overflow-tooltip width="180" align="center"></el-table-column>
      <el-table-column prop="sub_title"   label=" 班型副标题 " show-overflow-tooltip width="180" align="center"></el-table-column>
      <el-table-column prop="tab"   label=" 班型标签 " width="90" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.tab">{{scope.row.tab}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="cost" label=" 班型费用 "  align="center">
        <template slot-scope="scope">
          <span >{{scope.row.cost}}元</span>
        </template>
      </el-table-column>
      <el-table-column prop="pay_type" label="付款方式" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.pay_type==1">全款</span>
          <span v-if="scope.row.pay_type==2">分期</span>
        </template>
      </el-table-column>
      <el-table-column prop="apply_type" label=" 申领类型 " align="center">
        <template slot-scope="scope">
          <span>{{scope.row.apply_type.title.join(',')}}</span>

        </template>
      </el-table-column>
      <el-table-column prop="school_id" label="关联校区" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.school_id.title[0] }}</span>
        </template>
      </el-table-column>
       <el-table-column prop="" label="是否热门" align="center">
       <template slot-scope="scope">
            <el-switch v-model="scope.row.is_hot"  :disabled="!checkPermission(['packageIsHot'])"  @change="changeis_hot(scope.row.is_hot,scope.row.id)" :active-value='1' :inactive-value='0'></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="" label="同步展示" align="center">
       <template slot-scope="scope">
           <span  class="clickSwitch" @click="clickSwitch"><el-switch v-model="scope.row.state" disabled v-if="scope.row.status==0" ></el-switch></span>

            <el-switch v-model="scope.row.state" :disabled="!checkPermission(['packageSync'])" v-if="scope.row.status==1" @change="changeStatus(scope.row.state,scope.row.id)" :active-value='1' :inactive-value='0'></el-switch>
        </template>
      </el-table-column>
       <el-table-column prop="status" label="审核状态" align="center" :render-header="renderTip">
           <template slot-scope="scope">
          <span v-if="scope.row.status==0">待审核</span>
          <span v-if="scope.row.status==1">已通过</span>
          <span v-if="scope.row.status==2">已驳回</span>
        </template>
       </el-table-column>
      <el-table-column prop="" label="操作" align="center" v-if="checkPermission(['packageEdit','packageDelete'])">
        <template slot-scope="scope">
          <span class="edittext"  v-if="checkPermission(['packageEdit'])" @click="editform(scope.row.id)">编辑</span>
         <span class="edittext"  v-if="checkPermission(['packageDelete'])" @click="deleteitem(scope.row.id)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next"
          :total="pages.total">
        </el-pagination>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {updateStateData,updatesort,updateIsHot} from '@/api/course'
//按钮权限验证
import checkPermission from "@/utils/permission";
export default {
  data() {
    return {
       //表格数据
      tableData: [],
      //页码数据
      pages: {},
      value:true
    }
  },
  props: {
    //表格数据
    tabData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  watch: {
    tabData(val) {
      this.tableData = val.list
      this.pages = val.page
    },
  },
  methods: {
    //上移动
    async moveUp(index,row){
        //当前点击的排序id
        let nowId = row.id;
        //获取上移是上面的id
        let prevId = this.tableData[index-1].id;
        if (index > 0) {
          let params = {
            id:nowId,
            subId:prevId
          }
          console.log(params)
           let data = await updatesort(params)
           if(data.code=='0000'){
              let upDate = this.tableData[index - 1];
              this.tableData.splice(index - 1, 1);
              this.tableData.splice(index,0, upDate);
              this.$message.success('排序成功！')
               //刷新列表
              this.$emit('refreshdata')
           }
        } else {
          console.log('已经是第一条，不可上移')
        }
    },
    //下移动
    async moveDown(index,row){
        //获取下移是下面的id
        let nextId   = this.tableData[index+1].id;
        //当前点击的id
        let nowId    = row.id;
        if ((index + 1) ===  this.tableData.length){
          console.log('已经是最后一条，不可下移')
        } else {
          let params = {
             id:nowId,
             subId:nextId,
          }
          let data = await updatesort(params)
          if(data.code=='0000'){
              let downDate =  this.tableData[index + 1];
              this.tableData.splice(index + 1, 1);
              this.tableData.splice(index,0, downDate);
              this.$message.success('排序成功！')
              //刷新列表
              this.$emit('refreshdata');
          }

        }
    },
    //按钮权限验证
    checkPermission,
    //修改热门状态
    async changeis_hot(val,id){
      let state = val?0:1
      let params = {
        id,
        is_hot:state
      }
      let data = await updateIsHot(params)
      if(data.code=='0000'){
        this.$message.success('修改热门状态成功！')
        //刷新列表
        this.$emit('refreshdata')
      }else{
        //刷新列表
        this.$emit('refreshdata')
      }
    },
    //排序输入事件
    inputval(val){

    },
    //审核状态 提示
    renderTip(h, { column }) {
      return h(
        'div',
        {
          style: 'display:flex;margin:0 auto; justify-content: center;',
        },
        [
          h('span', column.label),
          h('promptmessage', {
            props: {
              messages: ['提交的审核信息将在审核通过后才可同步展示'],
            },
          }),
        ]
      )
    },
     clickSwitch(){
      this.$message({
            type: 'info',
            message: '班型信息正在审核中!'
          });
    },
    //切换状态
    async changeStatus(val,id){
      let state = val?0:1
      let params = {
        id:id,
        state:state
      }
      let data = await updateStateData(params)
      if(data.code=='0000'){
         this.$message({
            type: 'success',
            message: '修改同步展示成功!'
          });
      }else{
        //刷新列表
        this.$emit('refreshdata')
      }
    },
    handleSizeChange(val) {
         this.$emit('changepageTotal',val)
      },
      handleCurrentChange(val) {
        this.$emit('changepage',val)
      },
        //编辑
    editform(id){
      let params = {
        id,
        type:1
      }
      //显示dialog通知父组件打开弹窗
      this.$emit('openedit',params)
    },
    //删除
    deleteitem(id){
       this.$emit('deleteitem',id)
    },
  },
}
</script>

<style scoped lang='scss'>
.Tables {
  margin-top: 25px;
}
.edittext{
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
}
.pagination{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
::v-deep{
  .el-input--mini .el-input__inner{
    text-align: center;
  }
}
.sortbtn{
  padding: 5px 8px;
}
</style>
